

<template>
  <div>
    <!-- <Button type="primary" @click="modal1 = true">Display dialog box</Button> -->
    <Modal
      v-model="mode"
      width="45%"
      title="创建部门信息"
      @change="testChange"
      @on-cancel="cancel"
    >
      <Row>
        <Form
          ref="DeptData"
          :model="DeptData"
          :rules="ruleInUser"
          :label-width="100"
        >
          <div style="width: 90%; height: auto; margin: 0 auto">
            <Col span="24"> </Col>
            <Col span="12">
              <FormItem label="部门名称：" prop="DeptName">
                <Input
                  v-model="DeptData.DeptName"
                  placeholder="请输入部门名称"
                />
              </FormItem>

              <FormItem label="部门联系人：" prop="DeptLinkman">
                <label slot="label">联系人：</label>
                <Input
                  v-model="DeptData.DeptLinkman"
                  placeholder="请输入部门联系人"
                />
              </FormItem>
              <FormItem label="部门电话：" prop="DeptTelephone">
                <label slot="label">部门电话：</label>
                <Input
                  v-model="DeptData.DeptTelephone"
                  placeholder="请输入部门电话"
                />
              </FormItem>
              <FormItem label="部门地址：" prop="DeptAddr">
                <label slot="label">部门地址：</label>
                <Input
                  v-model="DeptData.DeptAddr"
                  placeholder="请输入部门地址信息"
                />
              </FormItem>
            </Col>

            <Col span="24">
              <FormItem label="备注：" prop="Remark">
                <label slot="label">备&nbsp;&nbsp;&nbsp;&nbsp;注：</label>
                <Input
                  v-model="DeptData.DeptRemark"
                  style="width: 500px"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请说明备注事项..."
                />
              </FormItem>
            </Col>

            <Col span="24">
              <FormItem>
                <Button
                  type="primary"
                  :loading="loading"
                  @click="handleSubmit('DeptData')"
                  >提交</Button
                >
                <!-- <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
              </FormItem>
            </Col>
          </div>
        </Form>
      </Row>

      <div slot="footer">
        <!-- <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button> -->
      </div>
    </Modal>
  </div>
</template>

<script>
import { getCompanyList, getDeptList, createDeptData } from "@/api/data";
import { formatDate } from "../../components/date.js";
export default {
  name: "Add",
  data() {
    return {
      loading: false,
      mode: this.add,

      //表单验证规则
      ruleInUser: {
        DeptName: [
          { required: true, message: "请填写部门名称", trigger: "blur" },
        ],

        DeptLinkman: [
          { required: true, message: "请填写部门联系人", trigger: "blur" },
        ],

        DeptTelephone: [
          { required: true, message: "请填写部门电话号码", trigger: "blur" },
        ],

        DeptAddr: [
          { required: true, message: "请填写部门地址", trigger: "blur" },
        ],
      },

      listdata: [],
    };
  },
  props: {
    add: {
      type: Boolean,
      required: true,
    },
    DeptData: {
      type: Object,
      required: true,
    },
  },
  methods: {
    testChange(val) {
      this.$emit("testChange", val);
    },
    cancel() {
      this.loading = false;
      let data = {
        mode: false,
      };
      this.$emit("cancelCallBack", data);
    },
    //提交编辑后的userInfo
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        console.log("提交验证：", valid);
        if (valid) {
          this.loading = true;
          this.submit();
        } else {
          this.$Message.error("请填写相关信息!");
        }
      });
    },
    submit() {
      const data = {
        CompanyName: this.DeptData.DeptName,
        CompanyLinkman: this.DeptData.DeptLinkman,
        CompanyTelephone: this.DeptData.DeptTelephone,
        CompanyAddr: this.DeptData.DeptAddr,
        CompanyRemark: this.DeptData.DeptRemark,
      };
      createDeptData(data)
        .then((res) => {
          if (res !== null) {
            this.$Message.success("提交成功");
            this.loading = false;
            let data = {
              mode: false,
            };
            this.$emit("success", data);
          } else if (response.data.flag == 0) {
            this.$Message.success("提交失败");
          } else if (response.data.flag == 2) {
            this.$Message.success("状态过期");
          }
        })
        .catch((error) => {
          this.$Message.error("请核对之后重新提交");
          this.loading = false;
        });
    },
  },
  mounted() {
    const cmpdata = {
      fields: "Id,CompanyName",
      offset: "0",
      limit: "-1",
    };
    const dptdata = {
      fields: "Id,DeptName",
      offset: "0",
      limit: "-1",
    };
    //获得包含公司Id和companyname字段的全部列表
    // getCompanyList(cmpdata).then(res =>{
    //   this.CompanyList = res.List;

    // });
    //获得包含公司Id和companyname字段的全部列表
    // getDeptList(dptdata).then(res =>{
    //   this.DeptList = res.List;
    // });
  },
  watch: {
    add(val) {
      this.mode = val;
    },
  },
};
</script>
<style>
.dept .ivu-select-placeholder {
  color: #515a6e !important;
}
</style>